<template>
	<div class="core-container">
            <div class="scroll-wrapper" ref="scroll">
                <div class="scroll-content">
                    <div class="scroll-item" v-for="(item, index) in emojis1" :key="index">
                        <div class="shangxian">
                            <span class="quname">{{item.label}}</span>
                            <span class="quxian">已上线：<i>{{item.total}}所</i></span>
                            <span class="quxian">待上线：<i style="color: #FFBA00;">0所</i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>
<script>
import BScroll from '@better-scroll/core'
import Slide from '@better-scroll/slide'
import axios from 'axios'
BScroll.use(Slide)
export default {
    data() {
        return {
            scrollY: 0,
            emojis1: ['椒江区', '黄岩区', '路桥区', '临海', '三门', '仙居', '集聚区'],
            // 播放间隔
            interval: 10
        }
    },
    mounted() {
        this.count();
        // this.init();
    },
    watch: {
        emojis1: function () {
          this.$nextTick(() => {
            this.bs1.refresh()
          })
        }
      },
    beforeDestroy() {
        this.bs1.destroy()
    },
    created(){
        // this.count();
    },
    methods: {
        count(){
            axios.post('/api/web/pub/school/count').then(response => {
                // this.emojis1 = response.data.rows;
                let data = response.data.data.school.yearCountByCountryMap;
                this.emojis1 = data[2020];
                this.init();
            }
            
            ).catch(error => 
            console.log(error)
        )
        },
        init() {
            this.bs1 = new BScroll(this.$refs.scroll, {
                probeType: 3,
                momentum: false,
                snap: {
                    loop: true,
                    threshold: 0.3,
                    speed: 400
                },
            })
            this.play();
            this.bs1.on('enable', () => {

            })
            this.bs1.on('scrollStart', () => {
                console.log('scrollStart-')
                // this.play()
            })
            this.bs1.on('scrollEnd', () => {
                // let page = this.bs.y
                // console.log(page);
                // 当滚动结束以后 如果是自动播放的话 那么首先要清除定时器(防止手动拖动轮播图以后图片无法正确显示)然后再次执行方法 才能实现轮播
                this.play()
            })
            this.bs1.on('scroll', ({ y }) => {
                this.scrollY = y;
            })
            this.bs1.on('beforeScrollStart', () => {

            })
        },
        play: function() {
            let playPage = this.scrollY - 1;
            let tabH = this.$refs.scroll.offsetHeight;
            // console.log(tabH);
            let aa = this.emojis1.length * tabH - 2 * tabH;
            if (playPage < -aa) {
                playPage = 0;
            }
            setTimeout(() => {
                this.bs1.scrollTo(0, playPage, 10)
            }, this.interval)
        }
    }
}
</script>
<style type="text/css" scoped>
	.core-container {
    height: 290px;
    overflow: hidden;
}

.scroll-wrapper {
    height: 50px;
    position: relative;
}

.scroll-item {
    height: 58px;
    margin-left: 20px;
    padding: 6px 0;
}

.shangxian {
    display: flex;
    justify-content: space-between;
    height: 58px;
    align-items: center;
    padding: 0 16px;
    background: linear-gradient(90deg, rgba(0, 252, 255, 0.3) 0%, rgba(0, 252, 255, 0) 100%);
    border-radius: 8px 0px 0px 8px;
}
.liudong{
    height: 284px;
}
.quname {
    font-size: 24px;
    font-weight: 600;
    color: #FFF;
    line-height: 33px;
}

.quxian {
    font-size: 18px;
    font-weight: 500;
    color: #FFF;
    line-height: 25px;
}

.quxian i {
    font-style: normal;
    color: #0CFED9;
}
</style>